<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父组件向子组件传递方法</title>
    <script src="../lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
    <!-- 第一步：（父组件向子组件传递方法）   -->
    <!--  父组件向子组件传递方法：使用的是 事件绑定机制：`v-on:`（可简写为 @）  -->
    <!--  方法名：自定义；但是 不区分大小写，都会以小写形式对待 -->
    <com1 v-on:funcShow="show"></com1>
</div>
<template id="temp">
    <div>
        <h2>这里是子组件</h2>
        <input type="button" value="子组件调用父组件的方法" @click="subClick">
    </div>
</template>
<script>
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            show() {
                console.log("调用了父组件的 show() 方法")
            }
        },
        components: {
            com1: {
                template: '#temp',
                data() {
                    return {
                        title: '',
                        params1: '',
                    }
                },
                methods: {
                    subClick() {
                        console.log('子组件的 subClick() 方法')

                        //<!-- 第二步：（父组件向子组件传递方法）   -->
                        //在子组件中，调用父组件的方法：使用 `this.$emit(方法名)`  （方法名要和第一步中定义的一致，不区分大小写，都以小写形式对待）
                        // this.$emit('funcShow')
                        //如果父组件的方法需要传递参数：funcshow(data1,data2),辣么，在子组件中调用父组件的方法时，`this.$emit('funcshow',params1,params2)`
                        // 如果这里的 参数 params1或者 params2 是 子组件的 data上的数据，辣么就达到了 子组件向父组件传值的目的
                        this.$emit('funcshow'/*,params1,params2*/)

                    },
                },
                props: [],

            },
        },
    })
</script>
</body>
</html>
